<template>
  <div class="forgetPassword">
    <div class="form">
      <div class="form-item">
        <CustomInput
          v-model="formItem.userName"
          title="手机号码"
          placeholder="手机号码"
          :isInput="true" />
      </div>
      <div class="form-item code">
        <div class="codeInput">
          <CustomInput
            v-model="formItem.vifyCode"
            title="验证码"
            placeholder="验证码"
            :isInput="true" />
        </div>
        <div class="codeButton">
          <div
            class="btn"
            :class="{ isDisabled: !isCanSend }"
            @tap="sendCode">
            <span class="btn-text">
              {{buttonText}}
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="action">
      <button
        :class="{disabled: nextDisabled}"
        :disabled="nextDisabled"
        @tap="actionClick">下一步</button>
    </div>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { mapMutations } from 'vuex'
import { ERR_OK } from 'api/config'
import { sendTelphone, forgetPasswordNext } from 'api/forgetPassword'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    buttonText ({ isCanSend, time }) {
      return isCanSend ? '发送验证码' : `${time}s后可发送`
    },
    nextDisabled () {
      let bol = false

      for (let key in this.formItem) {
        if (this.formItem[key] === '' || this.formItem[key] === undefined) {
          bol = true
          break
        }
      }

      return bol
    }
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      formItem: {
        userName: '',
        vifyCode: ''
      },
      sessionId: '',
      time: 60,
      isCanSend: true
    }
  },
  methods: {
    initData () {
      this.formItem = {
        userName: '',
        vifyCode: ''
      }
      this.sessionId = ''
      this.time = 60
      this.isCanSend = true
    },
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    actionClick () {
      this.forgetPasswordNext()
    },
    sendCode () {
      if (!this.isCanSend) {
        return
      }
      if (!this.formItem.userName) {
        this.$showToast({
          title: '手机号码不能为空',
          icon: 'none'
        })
        return
      }
      this.sendTelphone()
    },
    async forgetPasswordNext () {
      this.$showLoading('验证中')

      const obj = JSON.parse(JSON.stringify(this.formItem))

      const res = await forgetPasswordNext(obj, this.sessionId)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        const info = JSON.parse(JSON.stringify(this.formItem))
        info.sessionId = this.sessionId

        this.SET_INFO(info)
        wx.navigateTo({
          url: '/pages/forgetChangePassword/main'
        })
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    async sendTelphone () {
      this.$showLoading('正在发送')

      const obj = JSON.parse(JSON.stringify(this.formItem))
      delete obj.vifyCode

      const res = await sendTelphone(obj)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.sessionId = res.data
        this.isCanSend = false

        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          this.time--
          if (this.time === 0) {
            this.time = 60
            this.isCanSend = true
            clearInterval(this.interval)
          }
        }, 1000)
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    ...mapMutations({
      SET_INFO: 'forgetChangePassword/SET_INFO'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import "~common/scss/color";

  .forgetPassword {
    width: 100%;
    height: 100%;
    position: relative;
    > .form {
      padding: 0 10px;
      > .form-item {
        border-bottom: 1px solid rgb(232, 232, 232);
        &.code {
          display: flex;
          align-items: center;
          > .codeInput {
            flex: 1;
          }
          > .codeButton {
            flex: 0 0 120px;
            text-align: center;
            padding-top: 6px;
            > .btn {
              font-size: 28rpx;
              border-left: 1px solid #f2f2f2;
              > .btn-text {
                color: #444444;
              }
              &.isDisabled {
                > .btn-text {
                  color: lightgray;
                }
              }
            }
          }
        }
      }
    }
    > .action {
      width: 90%;
      margin: 0 auto;
      margin-top: 30px;
      > button {
        background-color: $color-default;
        color: white;
        &.disabled {
          color:rgba(0, 0, 0, 0.3);
          background-color:#F7F7F7;
        }
      }
    }
  }
</style>
